<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库信息</title>
    <link rel="stylesheet" type="text/css" href="/sys/css/summer.css">
    <script src="/lib/md5.min.js"></script>
    <script src="/sys/js/zbTool.js"></script>
    <script src="/sys/js/zbRouter.js"></script>
    <script src="/sys/js/zbRequest.js"></script>
    <script src="/sys/js/zbNotice.js"></script>
    <script src="/sys/js/zbList.js"></script>
</head>
<body>

<div class="flex-col-start flex-alignitems-stretch">
    <div class="header border-bottom padding-8 flex-row-between flex-alignitems-bottom">
        <div class="font-s14"><a href="https://doc.hearu.top" target="_blank">CornerPHP</a></div>
        <div class="font-s25">数据库信息</div>
        <div class="font-s14" onclick="router.route('v_hosts')">首页</div>
    </div>
    <div class="content flex-col-start" id="content"></div>
</div>

<template id="tplHosts">
    <div class="text-center margin-y8">主机</div>
    <div id="host_list">主机列表</div>
</template>

<template id="tplDatabases">
    <div class="text-center margin-y8">数据库</div>
    <div id="db_list"></div>
</template>

<template id="tplTables">
    <div class="text-center margin-y8">数据表</div>
    <div id="table_list"></div>
</template>

<template id="tplFields">
    <div class="text-center margin-y8">字段</div>
    <div class="scroll-x width-r100">
        <table class="table width-r100">
            <tr>
                <th>字段名</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>附加</th>
                <th>字段编码</th>
                <th>字符集</th>
                <th>注释</th>
            </tr>
            <tr class="field_list">
                <td>{COLUMN_NAME}</td>
                <td>{COLUMN_TYPE}</td>
                <td>{COLUMN_DEFAULT}</td>
                <td>{EXTRA}</td>
                <td>{CHARACTER_SET_NAME}</td>
                <td>{COLLATION_NAME}</td>
                <td>{COLUMN_COMMENT}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    let router = new zbRouter();
    let tool = new zbTool();
    let req = new zbRequest();
    let nt = new zbNotice();

    let cur_host = '';
    let cur_database = '';
    let cur_table = '';

    req.async = true; //异步请求
    req.defaultError = function (msg) {
        msg && nt.text(msg);
    }

    //显示主机列表
    function getHosts() {
        req.request('db_hosts_name',null, function (rs){
            let hosts = [];
            for (let i=0;i<rs.length;i++) {
                hosts.push({
                    item_id:rs[i],
                    title:rs[i],
                    desc: '查看数据库',
                    params: ''
                });
            }

            let host_list = new zbList();
            host_list.onClickRow = function () {
                cur_host = this.getAttribute('id');
                router.route('v_databases');
            }
            host_list.init(hosts, {list_id: 'hosts'});
            host_list.replaceNode('host_list');
        });
    }

    function getDatabase(){
        req.request('db_databases', {host_name:cur_host}, function (rs){
            let dbs = [];
            for (let i=0; i<rs.length; i++) {
                dbs.push({
                    item_id:rs[i],
                    title:rs[i],
                    desc: '查看数据表',
                    params: ''
                });
            }
            let db_list = new zbList();
            db_list.onClickRow = function () {
                cur_database = this.getAttribute('id');
                router.route('v_tables');
            }
            db_list.init(dbs, {list_id: 'dbs'});
            db_list.replaceNode('db_list');
        })
    }

    //获取所有表名
    function getTables(params){
        req.request('db_tables', {host_name:cur_host,db_name:cur_database}, function (rs){
            let tables = [];
            for (let i=0; i<rs.length; i++) {
                tables.push({
                    item_id:rs[i],
                    title:rs[i],
                    desc: '查看字段',
                    params: ''
                });
            }

            let table_list = new zbList();
            table_list.onClickRow = function () {
                cur_table = this.getAttribute('id');
                router.route('v_fields');
            }
            table_list.init(tables, {list_id: 'tables'});
            table_list.replaceNode('table_list');
        })
    }

    //获取表的字段
    function getFields(params){
        req.request('db_fields', {host_name:cur_host,db_name:cur_database,table_name:cur_table}, function (rs){
            router.repeatOuterHTML('.field_list', rs);
        })
    }

    let config = [
        {pattern: 'v_hosts', params: "tpl:tplHosts,target:content", callback: getHosts},
        {pattern: 'v_databases', params: "tpl:tplDatabases,target:content", callback: getDatabase},
        {pattern: 'v_tables', params: "tpl:tplTables,target:content", callback: getTables},
        {pattern: 'v_fields', params: "tpl:tplFields,target:content", callback: getFields},
    ];

    router.defaultRouter = 'v_hosts';
    router.init(config);
</script>
</body>
</html>